uni.setTabBarItem(OBJECT)

您所在的位置：网站首页 › uniapp tabbar样式 › uni.setTabBarItem(OBJECT)

uni.setTabBarItem(OBJECT)

#uni.setTabBarItem(OBJECT) | 来源: 网络整理| 查看: 265

# uni.setTabBarItem(OBJECT)

动态设置 tabBar 某一项的内容

平台差异说明

App H5 微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序 QQ小程序快手小程序京东小程序 √ √ √ √（钉钉小程序不支持） √ √ √ √ √

OBJECT参数说明：

属性类型默认值必填说明平台差异 index number 是 tabBar 的哪一项，从左边算起 text String 否 tab 上的按钮文字 iconPath String 否图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效。微信小程序 2.7.0+、支付宝小程序支持网络图片，其他平台暂不支持网络图片 selectedIconPath String 否选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效 pagePath String 否页面绝对路径，必须在 pages 中先定义，被替换掉的 pagePath 不会变成普通页面（仍然需要使用 uni.switchTab 跳转） App（2.8.4+）、H5（2.8.4+） visible Boolean true 否该项是否显示 App（3.2.10+）、H5（3.2.10+） iconfont Object 否字体图标，优先级高于 iconPath App（3.4.4+） success Funtion 否接口调用成功的回调函数 fail Funtion 否接口调用失败的回调函数 complete Funtion 否接口调用结束的回调函数（调用成功、失败都会执行）

iconfont参数说明：

属性类型说明 text String 字库 Unicode 码 selectedText String 选中后字库 Unicode 码 fontSize String 字体图标字号(px) color String 字体图标颜色 selectedColor String 字体图标选中颜色

示例代码

uni.setTabBarItem({ index: 0, text: 'text', iconPath: '/path/to/iconPath', selectedIconPath: '/path/to/selectedIconPath' })

注意: 设置 iconfont 属性时，pages.json iconfontSrc 需要指定字体文件，参考下面的配置

// pages.json { "tabBar": { "iconfontSrc":"static/iconfont.ttf", "list": [ { "pagePath": "pages/index/index", "text": "Tab1", "iconfont": { "text": "\ue102", "selectedText": "\ue103", "fontSize": "17px", "color": "#000000", "selectedColor": "#0000ff" } } ] } } # uni.setTabBarStyle(OBJECT)

动态设置 tabBar 的整体样式

平台差异说明

App H5 微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序 QQ小程序快手小程序京东小程序 √ √ √ √ √ √ √ √ √

OBJECT参数说明：

属性类型默认值必填说明 color String 否 tab 上的文字默认颜色，HexColor selectedColor String 否 tab 上的文字选中时的颜色，HexColor backgroundColor String 否 tab 的背景色，HexColor backgroundImage String 否图片背景。支持设置本地图片或创建线性渐变如，优先级高于 backgroundColor，仅 App 2.7.1+ 支持 backgroundRepeat String 否背景图平铺方式。repeat：背景图片在垂直方向和水平方向平铺；repeat-x：背景图片在水平方向平铺，垂直方向拉伸；repeat-y：背景图片在垂直方向平铺，水平方向拉伸；no-repeat：背景图片在垂直方向和水平方向都拉伸。默认使用 no-repeat。仅 App 2.7.1+ 支持 borderStyle String 否 tabBar上边框的颜色，仅支持 black/white midButton Object 否中间按钮仅在 list 项为偶数时有效详情。HBuilderX 3.6.9+ success Funtion 否接口调用成功的回调函数 fail Funtion 否接口调用失败的回调函数 complete Funtion 否接口调用结束的回调函数（调用成功、失败都会执行）

backgroundImage创建线性渐变说明

backgroundImage: linear-gradient(to top, #a80077, #66ff00);

目前暂不支持 radial-gradient（径向渐变）。

目前只支持两种颜色的渐变，渐变方向如下：

to right：从左向右渐变 to left：从右向左渐变 to bottom：从上到下渐变 to top：从下到上渐变 to bottom right：从左上角到右下角 to top left：从右下角到左上角

示例代码

uni.setTabBarStyle({ color: '#FF0000', selectedColor: '#00FF00', backgroundColor: '#0000FF', borderStyle: 'white' }) # uni.hideTabBar(OBJECT)

隐藏 tabBar

平台差异说明

App H5 微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序 QQ小程序快手小程序京东小程序 √ √ √ √ √ √ √ √ √

OBJECT参数说明：

属性类型默认值必填说明 animation boolean false 否是否需要动画效果，仅微信小程序、支付宝小程序、百度小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序支持 success Funtion 否接口调用成功的回调函数 fail Funtion 否接口调用失败的回调函数 complete Funtion 否接口调用结束的回调函数（调用成功、失败都会执行） # uni.showTabBar(OBJECT)

显示 tabBar

平台差异说明

App H5 微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序 QQ小程序快手小程序京东小程序 √ √ √ √ √ √ √ √ √

OBJECT参数说明：

为 tabBar 某一项的右上角添加文本。

平台差异说明

App H5 微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序 QQ小程序快手小程序京东小程序 √ √ √ √ √ √ √ √ √

OBJECT参数说明：

参数类型必填说明 index Number 是 tabBar的哪一项，从左边算起 text String 是显示的文本，不超过 3 个半角字符 success Function 否接口调用成功的回调函数 fail Function 否接口调用失败的回调函数 complete Function 否接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

uni.setTabBarBadge({ index: 0, text: '1' }) # uni.removeTabBarBadge(OBJECT)

移除 tabBar 某一项右上角的文本。

平台差异说明

App H5 微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序 QQ小程序快手小程序京东小程序 √ √ √ √ √ √ √ √ √

OBJECT参数说明：

参数类型必填说明 index Number 是 tabBar的哪一项，从左边算起 success Function 否接口调用成功的回调函数 fail Function 否接口调用失败的回调函数 complete Function 否接口调用结束的回调函数（调用成功、失败都会执行） # uni.showTabBarRedDot(OBJECT)

显示 tabBar 某一项的右上角的红点。

平台差异说明

App H5 微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序 QQ小程序快手小程序京东小程序 √ √ √ √ √ √ √ √ √

OBJECT参数说明：

参数类型必填说明 index Number 是 tabBar的哪一项，从左边算起 success Function 否接口调用成功的回调函数 fail Function 否接口调用失败的回调函数 complete Function 否接口调用结束的回调函数（调用成功、失败都会执行） # uni.hideTabBarRedDot(OBJECT)

隐藏 tabBar 某一项的右上角的红点。

平台差异说明

App H5 微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序 QQ小程序快手小程序京东小程序 √ √ √ √ √ √ √ √ √

OBJECT参数说明：

参数类型必填说明 index Number 是 tabBar的哪一项，从左边算起 success Function 否接口调用成功的回调函数 fail Function 否接口调用失败的回调函数 complete Function 否接口调用结束的回调函数（调用成功、失败都会执行） # uni.onTabBarMidButtonTap(CALLBACK)

监听中间按钮的点击事件

平台差异说明

App H5 微信小程序支付宝小程序百度小程序抖音小程序、飞书小程序 QQ小程序快手小程序京东小程序 √（HBuilderX 2.3.4+） √ x x x x x x x

Tip

tabbar是原生的，层级高于前端元素 uni-app插件市场有封装的前端tabbar，但性能不如原生tabbar 如果想要一个中间带+号的tabbar，在HBuilderX中新建uni-app项目、选择底部选项卡模板以上大部分操作 tabbar 的 API 需要在 tabbar 渲染后才能使用，避免在 tabbar 未初始化前使用

【本文地址】

uni.setTabBarItem(OBJECT)

uni.setTabBarItem(OBJECT)

今日新闻

推荐新闻